<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>爱帮诊</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="icon" type="image/png" href="__PUBLIC__/assets/i/favicon.png">
    <link rel="stylesheet" href="__PUBLIC__/css/common.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/amazeui.min.css">
    <link rel="stylesheet" href="__PUBLIC__/assets/css/app.css">
    <style>
        .yl-table td {
            border: solid 2px #F2F2F2;
        }

        .yl-p-list {
            margin-bottom: 0;
            font-size: 12px;
        }

        .yl-hr{
            margin-bottom: 0;
            border: solid #F2F2F2 5px;
        }
        .yl-div-list2{
            margin-top: 10px;
            margin-left: 10px;
            margin-right: 10px;
        }
        .yl-span-list{
            color: #b05c5b;
            float: right;
        }

        .yl-span{
            margin-right: 10px;
            color: #B34B3F;
            font-size: 20px;
        }

        .txt-r{
            text-align: right;
        }
        .txt-m{
            text-align: center;
        }
    </style>
</head>
<body>

<!--内容列表-->
<div>
    <hr class="yl-hr"/>
    <div class="yl-div-list2">
        <h5>
            <span class="yl-span">|</span>
            {$info.name}
            <span class="yl-span-list">{$info.price}元</span>
        </h5>
        <hr/>
        <p class="yl-p-list">{$info.intro}
        </p>

    </div>
</div>
<hr/>
<div class="no-empty">

</div>
<form class="am-form am-form-horizontal">
    <div class="am-form-group">
        <label for="hospital" class="am-u-sm-4 am-form-label txt-r">入院(转院)</label>
        <div class="am-u-sm-8">
            <input type="text" id="hospital">
        </div>
    </div>

    <div class="am-form-group">
        <label for="username" class="am-u-sm-4 am-form-label txt-r">姓名</label>
        <div class="am-u-sm-8">
            <input type="text" id="username">
        </div>
    </div>

    <div class="am-form-group">
        <label for="age" class="am-u-sm-4 am-form-label  txt-r">年龄</label>
        <div class="am-u-sm-8">
            <input type="number" id="age">
        </div>
    </div>

    <div class="am-form-group">
        <label for="phone" class="am-u-sm-4 am-form-label  txt-r">联系方式</label>
        <div class="am-u-sm-8">
            <input type="number" id="phone">
        </div>
    </div>
    <input type="hidden" id="type" value="{$info.type}">
    <div class="am-form-group">
        <div class="am-u-sm-12 txt-m">
            <button type="button" class="am-btn am-btn-success sub" style="width: 80%">提交</button>
        </div>
    </div>
</form>
<!--end-->
<script src="__PUBLIC__/assets/js/jquery.min.js"></script>
<script src="__PUBLIC__/assets/js/amazeui.min.js"></script>
<script src="__PUBLIC__/js/alertPopShow.js"></script>
<script>
    $(".sub").click(
        function () {
            var hospital = $("#hospital").val();
            var username = $("#username").val();
            var age = $("#age").val();
            var phone = $("#phone").val();
            var type = $("#type").val();

            if(hospital.length == 0){
                $(".no-empty").append("" +
                    "<div class='am-alert am-alert-danger' data-am-alert>"
                +"<button type='button' class='am-close'>&times;</button>"+
                "<p>请填写医院</p>"+
                "</div>");
                return false;
            }
            if(username.length == 0){
                $(".no-empty").append(
                "<div class='am-alert am-alert-danger' data-am-alert>"
                +"<button type='button' class='am-close'>&times;</button>"+
                "<p>请填写名字</p>"+
                "</div>");
                return false;
            }
            if(age.length == 0){
                $(".no-empty").append(
                "<div class='am-alert am-alert-danger' data-am-alert>"
                +"<button type='button' class='am-close'>&times;</button>"+
                "<p>请填写年龄</p>"+
                "</div>"
                );
                return false;
            }
            if(age.length == 0){
                $(".no-empty").append(
                "<div class='am-alert am-alert-danger' data-am-alert>"
                +"<button type='button' class='am-close'>&times;</button>"+
                "<p>请填写联系方式</p>"+
                "</div>"
                );
                return false;
            }

            //ajax
            $.ajax({
                url:"{:U('Index/womenyu')}",
                type:"post",
                data:{hospital:hospital,username:username,age:age,phone:phone,type:type},
                dataType:"json",
                success:function (res) {
                    if(res.code == 0){
                        popTipShow.alert('预约成功','感谢您的预约，稍后会有客服联系您', ['知道了'],
                            function(e){
                                //callback 处理按钮事件
                                var button = $(e.target).attr('class');
                                if(button == 'ok'){
                                    //按下确定按钮执行的操作
                                    this.hide();
                                    window.location.href="{:U('Index/medicalList')}";
                                }
                            }
                        );
                        return false;
                    }
                    popTipShow.alert('预约失败','系统正忙，请您重新预约', ['知道了'],
                        function(e){
                            //callback 处理按钮事件
                            var button = $(e.target).attr('class');
                            if(button == 'ok'){
                                //按下确定按钮执行的操作
                                this.hide();
                            }
                        }
                    );
                    return false;
                }
            });
        }
    );
</script>
</body>
</html>
